import React from 'react'
export default class App extends React.Component {
  state = {
    count: 1,
  }
  countHandle = () => {
    this.setState({ count: Math.random() })
  }
  render() {
    return (
      <>
        <h1>React的this.setstate异步更新</h1>
        <button onClick={this.countHandle}>点击</button>
        <h2>{this.state.count}</h2>
        <Footer aa={2} />
      </>
    )
  }
}
// state的原则性
// 需要的更新dom视图的才写到state里
// PureComponent 纯组件更新 不调用
// class Footer extends React.PureComponent {
class Footer extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.aa === nextProps.aa) {
      return false //跳过更新
    } else {
      return true
    }
  }
  render() {
    console.log('底部组件不更新')
    return (
      <>
        <h1>底部不更新组件</h1>
      </>
    )
  }
}
